<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        编号:<input type="text" v-model='addNew.id' ref='tp' v-setcolor>
        品牌名称:<input type="text" v-model='addNew.name' v-setcolor1='red'>
        <input type="button" value="添加" @click='add'>

    <div class="add">
        品牌名称:<input type="text" placeholder="请输入搜索条件">
    </div>

    <div>
        <table class="tb">
            <tr>
                <th>编号</th>
                <th>品牌名称</th>
                <th>创立时间</th>
                <th>操作</th>
            </tr>
            <tr v-for ='(value,index) in pig' :key='index'>
                <td>{{value.id}}</td>
                <td>{{value.name}}</td>
                <td>{{value.time}}</td>
                <td><a href="#" @click.prevent='del(index)'>删除</a></td>
            </tr>
            <tr>
                <td colspan="4" v-show='pig.length==0'>没有品牌数据</td>
            </tr>
            <!-- 动态生成内容tr -->
        </table>
    </div>
    </div>
    <script>
        // 案例第一步
        // 1，实现数据的展示 模拟数据 循环生成数据结构
        // 2，实现数据的新增 数组的添加 设置v-model 添加数据到数组
        // 3，实现数据的删除 在清空之后给予提示
        // 4，使用自定义指令 添加 钩子函数 使文本框自动获取焦点 
        // 5，使用全局自定义指令实现文本框颜色设置

        Vue.directive('setcolor',{
            inserted(el){
                el.style.color = 'red',
                el.style.height = '100px'
            }
        });
        Vue.directive('setcolor1',{
            inserted(el,binging){
                el.style.width = '50px',
                el.style.color = binging.value
            }
        })

        var vm = new Vue({
            el: '#app',
            mounted(){
                // console.log(this) 指向vue实例
                // console.log(this.$refs) //key:dom
                // console.log(this.$refs.tp) 
                this.$refs.tp.focus();

            },
            data: {
                red : 'pink',
                // 新增对象
                addNew : {
                    id : '',
                    name : '',
                    time : new Date(),
                },
                // 模拟数据对象数组
                pig : [
                    {
                        id : 1,
                        name : '佩奇',
                        time : new Date(),

                    },
                    {
                        id : 2,
                        name : '乔治',
                        time : new Date(),

                    },
                    {
                        id : 3,
                        name : '苏西',
                        time : new Date(),

                    },
                    {
                        id : 4,
                        name : '波利',
                        time : new Date(),

                    },
                ]
            },
            methods : {
                add(){
                    // this.pig.push(this.addNew)
                    // 浅拷贝：拷贝的是引用地址
                    /* 由于this.addNew始终是同一个对象 意味着页面当中添加的数据和当前代码都是同一个
                    对象的本质是引用地址 意味这页面中的对象和代码中的对象指向的是同一空间，任何修改都会互相影响 */

                    // 深拷贝：拷贝的是里面的成员的值
                    // 展开运算符
                    this.pig.push({...this.addNew})
                },
                del(index){
                    this.pig.splice(index,1)
                    // console.log(index)
                    // 这里的index是怎么获取的？？？？
                }
            }
        })
    </script>
</body>

</html>